<template>
  <div class="goodsindex block">
    <el-table style="width: 100%;"
              :data="tableData"
    >
      <el-table-column
          type="index">
      </el-table-column>
      <el-table-column
          label="商品图片"
          prop="mImg">
        <template slot-scope="props">
          <el-image
              style="width: 100px; height: 100px"
              :src="props.row.mImg"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="商品名称"
          prop="mName">
      </el-table-column>
      <el-table-column
          label="商品类别">
        <template slot-scope="scope">
          <span v-if="scope.row.cId === 0">
             花卉
          </span>
          <span v-if="scope.row.cId  ===1">
             水果
          </span>
        </template>
      </el-table-column>
      <el-table-column
          show-overflow-tooltip
          label="商品描述"
          prop="mDescription">
      </el-table-column>
      <el-table-column
          label="商品销量"
          prop="mSales">
      </el-table-column>
      <el-table-column
          label="商品库存"
          prop="mInstock">
      </el-table-column>
      <el-table-column
          label="商品原价"
          prop="mOriginal">
      </el-table-column>
      <el-table-column
          label="商品促销价"
          prop="mPromotion">
      </el-table-column>
      <el-table-column
          label="商品成本价"
          prop="mCost">
      </el-table-column>
      <el-table-column
          label="商品添加时间"
          prop="mCreate">
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              prefix-icon="el-icon-search"
              @blur="blurser"
              v-on:keyup.enter.native="submit"
              placeholder="输入商品名称"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="drawer = true; handleEdit(scope.$index, scope.row)"
                     size="mini"
                     type="primary"
                     style="margin-left: 16px;">
            修改信息
          </el-button>
          <el-button @click="releaseGoods(scope.$index, scope.row);spkie=true"
                     size="mini"
                     type="primary"
                     plain
                     style="margin-left: 16px;">
            发布秒杀
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        :hide-on-single-page="true"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-drawer
        title="发布秒杀"
        :visible.sync="spkie"
        :with-header="true">
      <el-form :label-position="labelPositions" label-width="80px" :model="formLabelAlign" :rules="rules"
               ref="formLabelAlign">
        <el-form-item label="商品图片" prop="mImg">
          <el-image :src="formLabelAlign.mImg" style="width: 200px;height: 200px"></el-image>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="formLabelAlign.mName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品ID">
          <el-input v-model="formLabelAlign.mId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="限购数量" prop="slimit">
          <el-input v-model.number="formLabelAlign.slimit"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" required>
          <el-col :span="11">
            <el-form-item prop="sbegin">
              <el-date-picker type="date" placeholder="选择日期" v-model="formLabelAlign.sbegin"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2"><i class="el-icon-right"/></el-col>
          <el-col :span="11">
            <el-form-item prop="sbegindate">
              <el-time-picker placeholder="选择时间" v-model="formLabelAlign.sbegindate"
                              style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" required>
          <el-col :span="11">
            <el-form-item prop="send">
              <el-date-picker type="date" placeholder="选择日期" v-model="formLabelAlign.send"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2"><i class="el-icon-right"/></el-col>
          <el-col :span="11">
            <el-form-item prop="senddate">
              <el-time-picker placeholder="选择时间" v-model="formLabelAlign.senddate"
                              style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="release('formLabelAlign')">发布秒杀</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!--修改-->
    <el-drawer
        title="修改信息"
        :visible.sync="drawer"
        :with-header="true">
      <el-form :model="goodFrom" status-icon ref="goodFrom"
               label-width="120px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="m_name">
          <el-input v-model="goodFrom.mName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="m_description">
          <el-input v-model="goodFrom.mDescription" placeholder="请输入商品描述" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品总量" prop="m_inStock">
          <el-input v-model="goodFrom.mInstock" placeholder="请输入商品总量"></el-input>
        </el-form-item>
        <el-form-item label="商品状态" prop="m_status">
          <el-select v-model="goodFrom.mStatus" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品原价" prop="moriginal">
          <el-input v-model="goodFrom.mOriginal" placeholder="请输入商品原价"></el-input>
        </el-form-item>
        <el-form-item label="商品促销价" prop="m_promotion">
          <el-input v-model="goodFrom.mPromotion" placeholder="请输入商品促销价"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="region">
<!--          <el-select v-model="goodFrom.cId" placeholder="请选择产品分类">
            &lt;!&ndash;            <el-option label="水果" value="0"></el-option>
                        <el-option label="花卉" value="1"></el-option>&ndash;&gt;
            <el-option
                v-for="item in categorys"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>-->
          <el-select v-model="goodFrom.cId" placeholder="请选择商品分类">
            <el-option label="水果" value="1"></el-option>
            <el-option label="花卉" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submits(goodFrom)">立即修改</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      currentPage: 1, //初始页
      pagesize: 5,    //每页的数据
      name: '',
      ridStatis: true,
      value: '',
      labelPositions: 'right',
      formLabelAlign: {
        mName: '',
        region: '',
        type: '',
        send: '',
        senddate: '',
        sbegin: '',
        sbegindate: '',
        slimit: '',
        mId: '',
        mImg: '',
        sprice: '',
        rid: '',
        cId:''
      },
      spkie: false,
      drawer: false,
      tableData: [{
        mImg: "",
        mName: '',
        cId: '',
        mDescription: '',
        mSales: '',
        mOriginal: '',
        mPromotion: '',
        mCost: '',
        mCreate: ''
      }],
      imgList: [],
      search: '',
      labelPosition: 'right',
      goodFrom: {
        mName: '',
        mDescription: '',
        mInstock: '',
        mStatus: '',
        moriginal: '',
        mOriginal: '',
        cId: '',
        mPromotion: '',
        mImg: ''
        /*pick: 8*/
      },
      options: [{
        value: '-1',
        label: '已下架'
      }, {
        value: '2',
        label: '在售'
      }, {
        value: '1',
        label: '待上架'
      }],
      categorys: [
        {
          value: '0',
          label: '水果'
        }, {
          value: '1',
          label: '花卉'
        }
      ],
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {
        slimit: [{type: 'number', required: true, message: '请输入限购数量', trigger: 'blur'}],
        sbegin: [
          {type: 'date', required: true, message: '请选择开始日期', trigger: 'change'}
        ],
        sbegindate: [
          {type: 'date', required: true, message: '请选择开始时间', trigger: 'change'}
        ],
        send: [
          {type: 'date', required: true, message: '请选择结束日期', trigger: 'change'}
        ],
        senddate: [
          {type: 'date', required: true, message: '请选择结束时间', trigger: 'change'}
        ],
      }
    }
  },
  mounted() {
    this.gettableData();
  },
  methods: {
    success(content) {
      this.$notify({
        title: '成功',
        message: content,
        type: 'success'
      });
    },
    failure(content) {
      this.$notify.error({
        title: '错误',
        message: content
      });
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      // console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.gettableData();
      // console.log(this.currentPage)  //点击第几页
    },
    // 搜索框失去焦点
    blurser: function () {
      console.log("失去焦点");
      if (this.search === null || this.search === '' || this.search.length < 1) {
        this.gettableData();
      }
    },
    // 搜索框回车监听
    submit: function () {
      if (this.search !== null && this.search !== '' && this.search.length > 0) {
        this.$http.get("rjbCommodity/likeAll?status=2&name=" + this.search)
            .then(backtrack => {
              this.tableData = backtrack.data;
              this.total = backtrack.data.length;
            })
            .catch(error => {
              this.success("查询失败");
            });
      }
    },
    gettableData() {
      // ("rjbCommodity/fruitStatus?status=0&pageNum=" + this.currentPage + "&pagesize=" + this.pagesize + "&name=" + this.name)
      this.$http.get("rjbCommodity/limitList?status=2&pageNum=" + this.currentPage + "&pageSize=" + this.pagesize)
          .then(data => {
            // console.log("列表数据 -> ")
            // console.log(data);
            this.tableData = data.data.list;
            this.total = data.data.total
          });
    },
    handleEdit(index, row) {
      row.mStatus = this.options[1].value;
      if (row.cId === 0) row.cId = this.categorys[0].value;
      if (row.cId === 1) row.cId = this.categorys[1].value;
      this.goodFrom = row;
    },
    releaseGoods(index, row) {
      this.formLabelAlign = row;
      this.formLabelAlign.value = this.rule;
      // console.log("releaseGoods")
      // console.log(this.formLabelAlign)
    },
    submits(goodFrom) {
      // 修改表单
      // goodFrom = encodeURIComponent(goodFrom);
      //console.log(goodFrom);
      if (goodFrom.mStatus === '请选择') goodFrom.mStatus = this.goodFrom.mStatus;
      if (goodFrom.cId === '请选择') goodFrom.cId = this.goodFrom.cId;
      this.$http.post("rjbCommodity/updateOne", JSON.stringify(goodFrom))
          .then(data => {
            if (data.status === 200) {
              this.success("修改成功");
              this.drawer = false;
              this.gettableData();
            } else {
              this.failure('修改失败');
            }
            // console.log(data);
          }, "json")
          .catch(error => {
            this.failure('修改失败');
            console.log(error);
          });
    },
    resetForm(formLabelAlign) {
      this.$refs[formLabelAlign].resetFields();
    },
    release(formLabelAlign) {
      this.$refs[formLabelAlign].validate(valid => {
        if (valid) {
          let date = this.formLabelAlign.sbegin.getFullYear() + "-" + (this.formLabelAlign.sbegin.getMonth() + 1) + "-" + this.formLabelAlign.sbegin.getDate();
          let time = this.formLabelAlign.sbegindate.getHours() + ":" + this.formLabelAlign.sbegindate.getMinutes() + ":" + this.formLabelAlign.sbegindate.getSeconds();
          // console.log("开始日期格式化->" + date)
          // console.log("开始时间格式化->" + time)

          let date1 = this.formLabelAlign.send.getFullYear() + "-" + (this.formLabelAlign.send.getMonth() + 1) + "-" + this.formLabelAlign.send.getDate();
          let time1 = this.formLabelAlign.senddate.getHours() + ":" + this.formLabelAlign.senddate.getMinutes() + ":" + this.formLabelAlign.senddate.getSeconds();
          // console.log("结束日期格式化->" + date1)
          // console.log("结束时间格式化->" + time1)
          //sId=null, mId=null, sPrice=null, sLimit=null, rId=null, sBegindate=null, sEnddate=null, sBegin=null, sEnd=null, rjbCommodity=null
          if (Date.parse(date + " " + time) > Date.parse(date1 + " " + time1)) {
            this.failure("结束时间要大于开始时间");
          } else {
            let rjbSpkie = {
              mId: this.formLabelAlign.mId,
              sPrice: this.formLabelAlign.mOriginal,
              sLimit: this.formLabelAlign.slimit,
              rId: this.ridStatis === true ? 1 : 0,
              sBegin: date,
              sBegindate: time,
              sEnd: date1,
              sEnddate: time1
            };
            // console.log("rjbSpkie ->")
            // console.log(rjbSpkie)

            this.$http({
              method: 'get',
              url: 'rjbSpkie/release',
              params: rjbSpkie,
              datatype: 'json'
            })
                .then(data => {
                  // console.log(data);
                  if (data.status === 200) {
                    this.success("发布成功");
                    this.spkie = false;
                    this.resetForm(formLabelAlign);
                  } else {
                    this.failure('发布失败');
                  }
                })
                .catch(error => {
                  console.log(error);
                  this.failure('发布失败');
                });
          }
        } else {
          this.failure("请填写表单数据");
        }
      })
    }
  }
}
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}

/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>
